<!DOCTYPE html>
<html>

<head>
    <title>打印模板设计</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="../public/stylesheets/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="../public/stylesheets/jquery-ui.css" />
    <link type="text/css" rel="stylesheet" href="../public/stylesheets/evol-colorpicker.css" />
    <link type="text/css" rel="stylesheet" href="../public/stylesheets/style.css" />
    <script type="text/javascript" charset="UTF-8" src="../public/javascripts/jquery.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../public/javascripts/bootstrap.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../public/javascripts/jquery-ui.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../public/javascripts/evol-colorpicker.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../public/javascripts/JsBarcode.all.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../public/javascripts/iconfont.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../public/javascripts/utils.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../public/javascripts/init.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../model.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../public/javascripts/design.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../public/javascripts/script.js"></script>
</head>

<body>
    <nav id="designer_header" class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <strong>打印模板设计</strong>
                </a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">文件 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">新建模板</a></li>
                            <li><a href="#">保存模板</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">退出设计</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">编辑 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">撤销</a></li>
                            <li><a href="#">恢复</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">剪切</a></li>
                            <li><a href="#">复制</a></li>
                            <li><a href="#">粘贴</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">全选</a></li>
                            <li><a href="#">删除</a></li>
                        </ul>
                    </li>
                    <li><a href="#">预览</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Silkage <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">个人中心</a></li>
                            <li><a href="#">我的模板</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="designer_area">
        <div id="designer_controls" class="panel-group" role="tablist" aria-multiselectable="true">

        </div>
        <div id="designer_viewport">
            <div id="designer_toobar" class="form-inline">
                <div class="input-group">
                    <span class="input-group-addon"><strong>顺丰快递物流单模板</strong></span>
                    <span class="input-group-addon"><strong>类型</strong>：快递单模板</span>
                    <span class="input-group-addon"><strong>尺寸</strong>：230mm × 127mm</span>
                    <span class="input-group-addon"><strong>偏移</strong>：0mm × 0mm</span>
                </div>
                <div class="btn-group">
                    <button id="btnTemplateEdit" type="button" class="btn btn-default" aria-label="Left Align" data-toggle="tooltip" data-placement="bottom" title="编辑">
                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                    </button>
                    <button type="button" class="btn btn-default" aria-label="Center Align" data-toggle="tooltip" data-placement="bottom" title="背景">
                        <span class="glyphicon glyphicon-blackboard" aria-hidden="true"></span>
                        <input type="file" id="background_selected" accept="image/png, image/jpeg, image/gif, image/jpg" />
                    </button>
                    <button type="button" class="btn btn-default" aria-label="Center Align" data-toggle="tooltip" data-placement="bottom" title="保存">
                        <span class="glyphicon glyphicon-saved" aria-hidden="true"></span>
                    </button>
                    <button type="button" class="btn btn-default" aria-label="Right Align" data-toggle="tooltip" data-placement="bottom" title="清空">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                    </button>
                    <button type="button" class="btn btn-default" aria-label="Center Align" data-toggle="tooltip" data-placement="bottom" title="删除">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
            <div id="designer_main" class="nui-scroll">
                <div class="designer_toolbar">
                    <div class="btn-group control-box" role="group">
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-default btn-sm dropdown-toggle" style="width:110px;" data-toggle="dropdown" data-placement="bottom" title="字体">
                                <span class="glyphicon glyphicon-font" aria-hidden="true" style="float:left;"></span> <a id="font_family">Arial</a>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" id="ddlFontFamily" role="menu">
                                <li role="presentation" datafield="Arial"><a role="menuitem" tabindex="-1" href="javascript:void(0);">Arial</a></li>
                                <li role="presentation" datafield="宋体"><a role="menuitem" tabindex="-1" href="javascript:void(0);">宋体</a></li>
                                <li role="presentation" datafield="微软雅黑"><a role="menuitem" tabindex="-1" href="javascript:void(0);">微软雅黑</a></li>
                                <li role="presentation" datafield="幼圆"><a role="menuitem" tabindex="-1" href="javascript:void(0);">幼圆</a></li>
                            </ul>
                        </div>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" data-placement="bottom" title="字号">
                                <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span> <a id="font_size">14px</a>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" id="ddlFontSize" role="menu">
                                <li role="presentation" datafield="8px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 8px;">8px</a></li>
                                <li role="presentation" datafield="10px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 10px;">10px</a></li>
                                <li role="presentation" datafield="12px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 12px;">12px</a></li>
                                <li role="presentation" datafield="13px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 13px;">13px</a></li>
                                <li role="presentation" datafield="14px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 14px;">14px</a></li>
                                <li role="presentation" datafield="16px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 16px;">16px</a></li>
                                <li role="presentation" datafield="18px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 18px;">18px</a></li>
                                <li role="presentation" datafield="20px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 20px;">20px</a></li>
                                <li role="presentation" datafield="22px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 22px;">22px</a></li>
                                <li role="presentation" datafield="24px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 24px;">24px</a></li>
                                <li role="presentation" datafield="26px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 26px;">26px</a></li>
                                <li role="presentation" datafield="28px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 28px;">28px</a></li>
                                <li role="presentation" datafield="30px"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-size: 30px;">30px</a></li>
                            </ul>
                        </div>
                        <button id="btnSelectColor" type="button" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" title="颜色">
                            <span class="glyphicon glyphicon-text-color" aria-hidden="true"></span>
                            <span class="caret"></span>
                        </button>
                        <button id="btnFontWeight" type="button" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" title="粗体">
                            <span class="glyphicon glyphicon-bold" aria-hidden="true"></span>
                        </button>
                        <button id="btnFontItalic" type="button" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" title="斜体">
                            <span class="glyphicon glyphicon-italic" aria-hidden="true"></span>
                        </button>
                        <button id="btnTextDecoration" type="button" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" title="下划线">
                            <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
                        </button>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" data-placement="bottom" aria-expanded="false" title="对齐方式">
                                <span id="font_align" class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" id="ddlFontAlign" role="menu">
                                <li class="fontAlign" role="presentation" datafield="left" class="dropdown-toggle" data-toggle="dropdown" data-placement="bottom" title="左对齐">
                                    <a role="menuitem" tabindex="-1" href="javascript:void(0);">
                                        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                                    </a>
                                </li>
                                <li class="fontAlign" role="presentation" datafield="center" class="dropdown-toggle" data-toggle="dropdown" data-placement="bottom" title="左对齐">
                                    <a role="menuitem" tabindex="-1" href="javascript:void(0);">
                                        <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
                                    </a>
                                </li>
                                <li class="fontAlign" role="presentation" datafield="right" class="dropdown-toggle" data-toggle="dropdown" data-placement="bottom" title="左对齐">
                                    <a role="menuitem" tabindex="-1" href="javascript:void(0);">
                                        <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <button id="btnDelControl" type="button" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" title="移除控件">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>
                <input id="color_selected" />
                <div id="designer">

                </div>
                <div id="designer_info">
                    <div class="designer_info_header">
                        控件信息
                    </div>
                    <table class="table table-hover table-striped info_table">
                        <tr>
                            <td>当前控件</td>
                            <td>control_9333</td>
                        </tr>
                        <tr>
                            <td>控件坐标</td>
                            <td>100, 100</td>
                        </tr>
                        <tr>
                            <td>控件类型</td>
                            <td>字段</td>
                        </tr>
                        <tr>
                            <td>控件名字</td>
                            <td>发货公司</td>
                        </tr>
                        <tr>
                            <td>绑定字段</td>
                            <td>send_company</td>
                        </tr>
                        <tr>
                            <td>默认数据</td>
                            <td>发货公司</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="designer_footer"></div>
    <div class="modal fade" id="TemplateEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">模板名称:</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">Message:</label>
                            <textarea class="form-control" id="message-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>